
<script lang="ts" setup>
import { tabsStore } from '@/store'
import { ref } from 'vue'
import { ArrowLeft,ArrowRight,Close } from '@element-plus/icons-vue';
const tabsstore = tabsStore()
const menutabsref = ref<HTMLDivElement>()
const leftgo = function(){
    menutabsref.value?.scrollTo({
        left:menutabsref.value?.scrollLeft-200,
        behavior:"smooth"
    })
}

const rightgo = function(){
    console.log(menutabsref.value?.scrollLeft)
    menutabsref.value?.scrollTo({
        left:menutabsref.value?.scrollLeft+200,
        behavior:"smooth"
    })
}

</script>

<template>
    <div class="menutabs-div">
        <el-button @click="leftgo" :icon="ArrowLeft" style="width: 20px;border:none;"/>
        <div ref="menutabsref" class="menutabs">
            <div class="menutab" v-for="item in tabsstore.tabs">
                <router-link class="linkclass" :to="{path:item.path}">{{item.title}}</router-link>
                <el-button :icon="Close" @click="tabsstore.close(item.path)" style="width: 20px;border:none;margin-left: 5px;" size="small" v-if="!(item.name == 'home')" />
            </div>
        </div>
        <el-button @click="rightgo" :icon="ArrowRight" style="width: 20px;border:none;"/>
        </div>
</template>

<style>
.menutabs-div{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: rgba(223,223,223,0);
}
.menutabs{
    width: calc(100% - 60px);
    height: 40px;
    overflow: hidden;
    display: flex;
    justify-content: start;
    align-items: center;
}
.menutab{
    width: auto;
    height: 30px;
    box-sizing: border-box;
    padding: 0px 10px;
    margin:0 5px;
    font-size: 13px;
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: white;
}
.linkclass{
    text-decoration: none;
    color: black;
    text-wrap: nowrap;
}
</style>